<template>
  <el-row>
    <div class="market-info">
      <!-- <el-button slot="append" icon="el-icon-search" @click="getRadarNews"></el-button> -->
      <!-- <el-col :span="20"> -->
        <!-- <div>
          <el-button slot="append" icon="el-icon-search" @click="getPanelNews"></el-button>
          <div v-for='item in mPanelNewList' :key="item.content" v-html="item.content"></div>
        </div> -->
        <!-- 两个盒子联动，初始是分开的，但是如果复用animate方法会有一个盒子没有过渡效果 -->
        <div>
          <el-col :span="12">
          <div class="title">
            <a href="http://money.163.com/stock/" target="_blank">
                盘面快讯：
            </a>
          </div>
          </el-col>
          <el-col :span="12">
          <div class="title">
            <a href="http://money.163.com/stock/" target="_blank">
                市场雷达：
            </a>
          </div>
          </el-col>
        </div>
        <div calss="panelNew-contain" id="panelNew-contain">
          
          <div class="scroll-contain" ref="con1" :class="{anim:animate==true}" @mouseenter="mEnter" @mouseleave="mLeave">
            <!-- <p v-for='item in items' :key="item.name">{{item.name}}</p> -->
            <!-- 盘面快讯的返回对象中的消息数组是直接拼接好的HTML字符串，所以只要直接用v-html指令绑定数据 -->

            <!-- 盘面快讯 -->
            <el-col :span="12">
            <div class="panel-new">
              <p v-for='item in mPanelNewList' :key="item.content"  v-html="item.content"></p>
            </div>
            </el-col>

            <el-col :span="12">
             <!-- 市场雷达 -->
            <div class="market-rander">
              <table>
                <tbody>
                  <tr v-for='item in mRadarNewList' :key="item.code">
                    <td class="time">{{item.TIME}}</td>
                    <!-- 根据股票代码动态拼接地址 -->
                    <td class="text-left"><a :href="['http://quotes.money.163.com/'+item.CODE+'.html#3a55']">{{item.NAME}}</a></td>
                    <td class="text-right">{{item.TYPE}}</td>
                    <td>{{item.NUMBER}}</td>
                  </tr>
                </tbody>
              </table>
            </div>
            </el-col>
          </div>
        </div>
      <!-- </el-col> -->

      <!-- <el-col :span="12"> -->
        <!-- 市场雷达 -->
        <!-- <div calss="radar-contain" id="radar-contain">
          <div class="scroll-contain" ref="con1" :class="{anim:animate==true}" @mouseenter="mEnter" @mouseleave="mLeave">
            <table>
              <tbody>
                <tr v-for='item in mRadarNewList' :key="item.code">
                  <td class="time">{{item.TIME}}</td>
                  <td class="text-left"><a href="http://quotes.money.163.com/060075.html#3a55">{{item.NAME}}</a></td>
                  <td class="text-right">{{item.TYPE}}</td>
                  <td>{{item.NUMBER}}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div> -->
      <!-- </el-col> -->
    </div>
  </el-row>
</template>

<script>
import jsonp from 'jsonp'
export default {
  data () {
    return {
      animate:false,
      items:[ //消息列表对应的数组
      {name:"马云"},
      {name:"雷军"},
      {name:"王勤1"},
      {name:"王勤2"},
      {name:"王勤3"},
      {name:"王勤4"},
      {name:"王勤5"},
      ],
      mPanelNewList:[],
      mRadarNewList:[]
    }
  },
  created () { 
    this.getPanelNews()
    this.getRadarNews()
    this.timer1= setInterval(this.scroll,1000)
  },
  methods: {
    getPanelNews(){
      var _panelNew = this;
      var param = { param: "_ntes_news_callback" };
      window._ntes_news_callback = function(res) {
        console.log(res);
        var panelNews = res;
        console.log(panelNews);
        _panelNew.mPanelNewList=res.list;
        console.log(_panelNew.mPanelNewList);
      };
      jsonp('http://money.163.com/special/00254038/quotes-pmkx-json.js?guid=1588822042650&callback=_ntes_news_callback',param,(err,data)=>{
        if(!err){

        }
      });
    },
    getRadarNews(){
      /* var _panelNew = this;
      var param = { param: "_ntes_news_callback" };
      window._ntes_news_callback = function(res) {
        console.log(res);
        var panelNews = res;
        console.log(panelNews);
        _panelNew.mPanelNewList=res.list;
        console.log(_panelNew.mPanelNewList);
      }; */
      jsonp('http://quotes.money.163.com/hs/service/marketradar_ajax.php',{},(err,res)=>{
        if(!err){
          console.log(res);
          this.mRadarNewList=res.list;
          console.log(this.mRadarNewList);
        }
      });
    },
    // 数据一渲染出来，500ms之后立即让con1.style.marginTop='-90px';
    scroll(){
      let con1 = this.$refs.con1;
      con1.style.marginTop='-30px';
      // con1.style.marginTop='-90px';
      this.animate=!this.animate;
      var that = this; // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
      setTimeout(function(){
        // that.items.push(that.items[0]);
        // that.items.shift();
        // 往数组的末尾添加第一个元素得到一个新数组
        that.mPanelNewList.push(that.mPanelNewList[0]);
        that.mRadarNewList.push(that.mRadarNewList[0]);
        // 将数组头部第一个元素删除，相当于将第一个元素移到末尾
        that.mPanelNewList.shift();
        that.mRadarNewList.shift();
        // 设置过渡效果
        // that.animate=!that.animate;
        // 让超出部分又回到盒子，此时第一行已变成下一行，由于时间间隔很短，看不出来这个变化
        con1.style.marginTop='0px';
        that.animate=!that.animate; // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
      },500)
  },
    mEnter () {  
      clearInterval(this.timer1)
    },
    mLeave () {
      this.timer1= setInterval(this.scroll,1000)
    },
  },
// watch : {
// state : {
// handler : function (newValue,oldValue) {
 
// }
// }
// }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* *{
  margin: 0 ;
  padding: 0;
} */
.market-info {
  margin: 15px 0;
}
#panelNew-contain,#radar-contain{
  /* width: 400px; */
  /* height: 175px; */
  /* height:200px; */
  height:150px;

  line-height: 30px;
  overflow: hidden;
  /* padding-left: 30px; */
  /* margin-top:100px; */
  border: 1px solid #fff;
  transition: all 0.5s;
}
.anim{
  transition: all 0.5s;
  /* transition: all 5s; */
}
.scroll-contain li{
  padding:0;
  margin:0;
  list-style: none;
  line-height: 32px;
  height: 32px;
}
.panel-new {
  /* float:left; */
  padding-left:3px;

}
.news-time {
  z-index: 999;
  color:#959595;
  font-size: 12px;
  font-family: Arial,宋体;
  margin: 0 12px 0 0;
}
table {
  /* display: table-row-group;
  vertical-align: middle;
  border-color: inherit;
  border-collapse: collapse; */
  margin-left: 3px;
  border-spacing: 0;
}
table td {
  padding-right:45px;
  /* padding: 0 15px; */
  color: #2b2b2b;
  font-size: 12px;
  text-align: left;
  line-height: 32px;
  height: 32px;
}
table td.time{
  color:#959595;
}
table td.text-right {
  text-align: right;
  color:#ee5f58;
}
</style>